<template>
  <div class="stulist">
    <h3>Students List</h3>
    <div id="searchData">
      <select id="searchType"  v-model='searchData.searchType'  @change='searchDateToggle()'>
        <option value="name">姓名</option>
        <option value="age">年龄</option>
        <option value="gender">性别</option>
      </select>
      <input type="text" placeholder="模糊查询" v-model.lazy='searchData.searchValue' @change='searchDateToggle()'>
      <input type="button" value="查询" @click='search()'>
    </div>
    <table>
      <thead>
        <tr>
          <th>学生头像</th>
          <th>学生姓名</th>
          <th>学生年龄</th>
          <th>学生性别</th>
          <th>学生班级</th>
          <th>班级教师</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='item in studentData.students' :key='item._id'>
          <td>
            <!-- 动态绑定src 地址 -->
            <img style='width:50px;height: 50px;border-radius:100px;' :src=" 'http://localhost:3000/img/' + ( item.imagesName || 'defaultImg.jpg') " alt="stu-logo">
          </td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.classId.name}}</td>
          <td>
            <template v-for='item in item.classId.teachers'>
              <span :key='item._id'>{{item.name}}</span><br/>  
            </template>
          </td>
          <td>
            <button @click="$router.push('/updateStu/'+item._id)">修改</button>
            <!-- <button @click='$emit("transStudent",item)'>修改</button> -->
            <button @click='deleteStudent(item._id)'>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="pageDateSet">
      <div>
        <select name="pagaSize" v-model='pagaData.pageSize' @change='pageDateToggle("TogglePageSize")'>
          <option value="5">5条数据/页</option>
          <option value="10">10条数据/页</option>
        </select>
        <div id="pageDate">
          <span>共学生数据：{{studentData.totalStudent}}条</span>
          <span>当前页：{{studentData.currentPage}}</span>
          <span>总页数：{{studentData.totalPage}}</span>
        </div>
      </div>
      <div id="pageBtn">
        <input type="button" value="首页" @click="pageDateToggle('ToggleFirstPage')">
        <input type="button" value="尾页" @click="pageDateToggle('ToggleLastPage')">
        <input type="button" value="上一页" @click="pageDateToggle('prevPage')">
        <input type="button" value="下一页" @click="pageDateToggle('nextPage')">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {mapState,mapActions,mapMutations} from 'vuex';

export default {
  mounted(){
    //挂载完成就调用
    this.getStudents();    
  },
  data(){
    return{
      pagaData:{
        pageSize:'5',
        currentPage:'1',  
      },
      searchData:{
        searchType:'name',
        searchValue:'',
      }
    }
  },
  computed:{
    //接收仓库里getStudents执行后的studentData数据
    ...mapState(['studentData']),
  },
  methods:{   
    ...mapActions(["getStudents"]),
    ...mapMutations(["togglePageData","toggleSearchData"]),

    async deleteStudent(_id){
      const data = await axios({
        url:'/students/deleteStudent',
        method:'get',
        params:{
          _id
        }
      }).then(
        ({data} = data) =>{
          if (data.status) {
            alert(data.message);
            this.getStudents();
          }else{
            alert(data.message);
          }
        })
    },

    //修改页码信息
    pageDateToggle(doWhat){
      //通过doWhat变量判断函数做什么----//改页码或者页码数据
      //mutations方法只接受两个参数
      const params ={
        doWhat,
        ...this.pagaData,
      }
      this.togglePageData(params);
      this.getStudents();  
    },

    //搜索信息实时修改
    searchDateToggle(){
      this.toggleSearchData(this.searchData);
    },

    //搜索
    search(){
      //搜索时，设置初始页码为一
      this.togglePageData({doWhat:"ToggleFirstPage"});
      this.getStudents();  
    }
  }
}
</script>

<style>
div#stulist div{
  width: 100%;
}
div#pageDateSet{
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
div#pageDateSet div{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>